<template>
  <view class="container">
    <view class="navigation">
      <navigator url="/pages/recognize" class="nav-item">慧眼识图</navigator>
      <navigator url="/pages/bot" class="nav-item">链语AI</navigator>
      <navigator url="/pages/database" class="nav-item">藏药云库</navigator>
      <navigator url="/pages/databoard" class="nav-item">药海智屏</navigator>
    </view>

    <view class="main-content">
      <view class="sidebar">
        <ul>
          <li><button @click="selectTable('source')">药材基源信息管理</button></li>
          <li><button @click="selectTable('herb')">药材管理</button></li>
          <li><button @click="selectTable('efficacy')">药效管理</button></li>
        </ul>
      </view>

      <view class="content">
        <component :is="currentTable" :data="currentData" />
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue';
import { useDatabase } from '../utils/database.js';

export default {
  setup() {
    const { currentTable, currentData, selectTable } = useDatabase();

    return {
      currentTable,
      currentData,
      selectTable
    };
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/global.scss';
@import '../styles/database.scss';
</style>